<script setup lang="ts">
import type { UploadFile, UploadFiles } from 'element-plus'
import { uploadImageAction } from '@/api/image_class'
import { showMessage } from '@/utils/elementTools'

import { useUserStore } from '@/stores/modules/user'
const memberStore = useUserStore()
const token = memberStore.token
defineProps({
  data: Object
})
const emit = defineEmits(['success'])
const handleSuccess = (res: any, file: UploadFile, fileList: UploadFiles) => {
  // console.log(res, file, fileList)
  emit('success', { res, file, fileList })
}
const handleError = (err: Error, file: UploadFile, fileList: UploadFiles) => {
  // console.log(err, file, fileList)
  let msg = JSON.parse(err.message).msg || '上传失败'
  showMessage(msg, 'error')
}
</script>

<template>
  <el-upload
    drag
    :action="uploadImageAction"
    :headers="{ token }"
    name="img"
    :data="data"
    :on-success="handleSuccess"
    :on-error="handleError"
    multiple
  >
    <el-icon class="el-icon--upload"><upload-filled /></el-icon>
    <div class="el-upload__text">将文件拖到此处, 或点击选择<em>文件上传</em></div>
    <template #tip>
      <div class="el-upload__tip">只能上传jpg/png文件，且大学不超过500kb</div>
    </template>
  </el-upload>
</template>

<style lang="scss" scoped>
/*  */
</style>
